<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求体类型</title>
</head>

<body>
  <form id="myForm">
    <div>
      <!-- 用户名 -->
      <span>用户名：</span>
      <input type="text" name="username">
    </div>
    <div>
      <!-- 密码： -->
      <span>登录密码：</span>
      <input type="password" name="password">
    </div>
    <div>
      <!-- 提交按钮 -->
      <button id="btn">提交</button>
    </div>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('#btn').addEventListener('click', (e) => {
        e.preventDefault()
        // alert(1)
        // 用三种不同的方式传递参数给服务器
        // 对应着三种不同的类型

        const p = new FormData()
        p.append('name', 1)

        console.log(p)
        axios({
            url: 'http://ajax-api.itheima.net/api/data',
            method: 'POST',
            data: p // p是FormData，此时 content-type就是：Content-Type: multipart/form-data;
        }).then(res => {
            console.log(res)
        })

        // const p = serialize(document.querySelector('#myForm'), {hash: true})
        // console.log(p)
        // axios({
        //     url: 'http://ajax-api.itheima.net/api/data',
        //     method: 'POST',
        //     data: p // p是对象，此时 content-type就是：Content-Type: application/json
        // }).then(res => {
        //     console.log(res)
        // })

        // const p = serialize(document.querySelector('#myForm'))
        // console.log(p)
        // axios({
        //     url: 'http://ajax-api.itheima.net/api/data',
        //     method: 'POST',
        //     data:p // p是查询字符串，此时 content-type就是：Content-Type: application/x-www-form-urlencoded
        // }).then(res => {
        //     console.log(res)
        // })
    })
  </script>
</body>

</html>